<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>欢乐谷后台管理系统</title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="/easyui/1.3.4/themes/default/easyui.css" />
    <link href="/loginCss/css/icon.css" type="text/css" rel="stylesheet" />
    <link href="/loginCss/css/login.css" type="text/css" rel="stylesheet" />

    <!--导入jquery和easyui-->
    <script src="/loginJs/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/easyui/1.3.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="/loginJs/js/index/gVerify.js"></script>

</head>

<body class="imgbody">
<h1 class="myTitle">欢乐谷后台管理系统</h1>
<div id="login" class="easyui-window" title="用户登录" style="padding: 35px; width: 400px; height: 270px;">
    <div style="text-align: center; padding: 5px;">
        <form action="login.do" method="post" id="myForm">
            <div>
                <img src="/loginImage/images/user.png" widthe="20" height="20" style="position: relative; top: 5px;" />
                <!--用户登录输入框-->
                <label for="userName">用户名:&nbsp;</label>
                <input class="easyui-textbox" type="text" name="Username" placeholder="请输入用户名" id="Username"></input>
            </div>
            <br />
            <div>
                <img src="/loginImage/images/pwd.png" widthe="20" height="20" style="position: relative; top: 5px;" />
                <!--密码登录输入框-->
                <label for="Password">密&nbsp;码:&nbsp;&nbsp;&nbsp; </label>
                <input class="easyui-textbox" name="Password" type="Password" placeholder="请输入密码"id="Password" ></input>
            </div>
            <div>
                &nbsp;
                <img src="/loginImage/images/yan.png" widthe="20" height="20" style="position: relative; top: 5px;" />
                <label for="checkCode">验证码： </label>
                <input type="text" id="codeinput" placeholder="请输入验证码" style="width: 80px;">
                <input type="text" id="checkCode" onclick="createCode()" readonly="readonly" style="width: 90px;height:25px;border: 0;outline: none;text-align: center;" />
            </div>
            <div>
                <span style="color:red" id="error-panel"></span>
            </div>
            <br/>
            <!--登录按钮-->
            <a href="javascript:void(0)" class="easyui-linkbutton" icon="icon-ok" onclick="login()">登录</a> &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
        </form>
    </div>
</div>

<script type="text/javascript">
    /* 登录触发方法 */
    function login2() {
        var username = $("#Username").val();
        var password = $("#Password").val();
        if (username == '' || password == '') {
            $("#error-panel").empty();
            $("#error-panel").append("账号或密码不能为空");
            createCode();
            return;
        }

        $.ajax({
            url: "loginSubmit",
            type: "post",
            dataType: "json",
            data:{
                "staffUsername":username,
                "staffPwd": password,
            },
            success: function (data) {
                if (data.info == true){
                    location.href = "/manager/main"; /*跳转用户*/
                } else {
                    $("#error-panel").empty();
                    $("#error-panel").append(data.info);
                    createCode();
                }
            }
        })
    }

    //窗口的设置
    $('#login').window({
        collapsible:false,//关闭折叠按钮
        maximizable:false,//关闭最大化按钮
        minimizable:false,//关闭最小化按钮
        closable:false
    });
</script>

<script type="text/javascript">
    $(function() {
        createCode();
    })

    function createCode() {
        code = "";
        var codeLength = 4; //验证码的长度
        var checkCode = $("#checkCode");
        var ch = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');

        for(var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random() * ch.length);
            code += ch[index];
        }
        checkCode.val(code);
        checkCode.css("background-color",randomColor(180, 240));
        checkCode.css("font-size",'22px');
        checkCode.css("color",randomColor(10,200));
    }

    function randomColor(min, max) {
        var r = Math.floor( Math.random()*(max-min)+min);
        var g = Math.floor( Math.random()*(max-min)+min);
        var b = Math.floor( Math.random()*(max-min)+min);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    function login() {
        var inputCode = $("#codeinput").val().toLowerCase();
        if(inputCode.length <= 0) {
            alert("请输入验证码！");
        } else if(inputCode != code.toLowerCase()) {
            alert("验证码输入错误！");
            createCode();
        } else {
            login2();
        }
    }
</script>

</body>
<style type="text/css">
    #checkCode {
        font-family: Arial;
        font-style: italic;
        padding: 2px 2px;
        margin:5px 0px;
        letter-spacing: 8px;
        font-weight: bolder;
        text-shadow: 3px 3px 3px gray;
    }
    #btn{
        margin:5px 0px;

    }
</style>

</html>